<template>
  <div class="wrap">
    <!-- side -->
    <!-- <div class="side" v-html="headerText"> -->
      <!-- {{headerText}} -->
    <!-- </div> -->
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="" @click="gotologo()">
      </div>
      
      <div class="menu" v-if="$route.path != '/search'">
        <div class="menuItem" v-for="(item,index) in arr" :key='index' @mouseover.stop="changeActive(index,item)" @mouseout="removeActive(index,item)">
        <div :class="isActive == index?'menuItem_selectTitle':'menuItem_title'" @click="changetitle(index,item)">{{item.name}} <img src="@/assets/arrowDown.png" alt="" ></div>
          <div class="menuItem_content" v-show="isHover == index && item.children">
            <div class="content_item" v-for="(items,indexs) in item.children" :key="indexs" @mouseover="menuCon(indexs)">
              <!-- 壹級菜單 -->


              <div class='title_one '  @click.self="gotoclassify(items,item)">{{items.name}}
                <img src="@/assets/rightArrow.png" alt=""  v-show="items.children && items.children.length>0">
                
                <div v-show='isActiveOne == indexs' class="content_two">
                    
                    <div class="content_item_two"  v-for='(itemss,indexss) in items.children' :key='indexss'>
                      <!-- 二級菜單 -->
                      <div class='title_two' @click.stop="gotoclassify(itemss,item)">{{itemss.name}}</div>
                    </div>
                  </div>
                </div>
                  
              </div>
            </div>            
        </div>
      </div> 
      <div class="searchBox" v-if="$route.path == '/search'">
        <el-input
          prefix-icon='el-icon-search'
          placeholder="請輸入商品名稱或關鍵詞"
          v-model="searchInput"
          clearable
          @keyup.native.enter="searchContent">
        </el-input>
      </div>
      <div class="other">
        <img src="@/assets/search.png" alt="" @click="gotoSearch()">
        <img src="@/assets/car.png" alt="" @click="gotocar()">
        <div class="minebox">
          <img src="@/assets/mine.png" alt="" @click="gotomine()">
          
          <div v-if="user_id" @click="logoutUser()">退出</div>
        </div>     
        <br />
        <div class="welcome" v-if="showName">你好！{{showName}}</div>   
      </div>
    </div>
  </div>
</template>

<script>
import { getToken,removeToken ,removeOnly} from '@/utils/auth' // 驗權
import {getcarousel,getBanner,checkUser} from '@/api/index'
import bus from '@/api/bus'
import {logout} from '@/api/login'
export default {
  name: 'Header',
  data () {
    return {
      arr:[
        // {name:'首頁',path:'/home',status:0},
        // {name:'最新推薦',path:'/home',status:1,children:[
        //   {name:'熱銷推薦',id:'1',status:'new'},
        //   {name:'限定優惠',id:'3',status:'new'},
        //   {name:'人氣推薦',id:'5',status:'new'},
        //   {name:'會員升級優惠',id:'4',status:'new'}
        // ]},
    // {name:'幸福飲食',path:'/home',status:2},
        //  {name:'禮品專區',path:'/home',status:1},
        // {name:'家居生活',path:'/home',status:1,children:[{name:'洗漱用品',children:[{name:'xxx'}]},{name:'洗漱用品',children:[{name:'xxx'},{name:'xxx'},{name:'xxx'},{name:'xxx'}]}]},
        //  {name:'購物指南',path:'/newest',status:0,children:[{name:'品牌介紹',id:'1'},{name:'常見問題',id:'2'},{name:'聯絡我們',id:'3'}]}
      ],
      istrue:false,
      isActive:0,//每壹個菜單選擇
      isActiveOne:-1,// 菜單打開內部壹級
      isHover:-1, // 滑倒出現標誌
      user_id:null,
      headerText:'最新好消息，全場大甩賣',
      searchInput:'',
      menuuu:null,
      showName:null
    }
  },
  watch: {
    $route: function (to, from) {
       bus.$emit("routerWatch",to);
      
    }
  },
  mounted(){
    // 切換菜單顯示
    setTimeout(() => {
        if(sessionStorage.getItem('name')){
            this.showName=sessionStorage.getItem('name')
        }
    }, 1000);
    var menuuu = sessionStorage.getItem('menu')
    this.menuuu = sessionStorage.getItem('menu')
    if(menuuu == null || menuuu == undefined || menuuu == ''){
      this.isActive = 0
    }else{
      if(menuuu == 'other'){
        this.isActive = -1
      }else{
        this.isActive = menuuu
      }
    }
    // 獲取用戶登錄
    if(getToken()){
      this.user_id = getToken()
    }else{
      this.user_id = null
    }
    // 獲取動態菜單
    this.getMenu()
    // 頭部文字切換
    this.getTouText(2)
  },
  methods:{
    menuCon(indexs){
      this.isActiveOne=indexs
    },
    // 獲取頭部文字
    getTouText(e){
      getBanner({id:e}).then(response => {
        if(response.errno == 0){
          if(response.data.list.length != 0){
            this.headerText = response.data.list[0].desc
          }          
        }
      })
    },
    // 獲取動態菜單
    getMenu(){
      getcarousel().then(response => {
        if(response.errno == 0){
          var array = response.data
          for(var i = 0;i<array.length;i++){
            array[i].status = 1
            this.arr.push(array[i])
          }
          this.arr.push({name:'購物指南',path:'/footdetail',status:2,children:[{name:'品牌介紹',id:'1',status:'foot'},{name:'常見問題',id:'11',status:'foot'},{name:'聯絡我們',id:'3',status:'foot'}]})
        }
      })
    },
    gotologo(){
      this.isActive = 0
      sessionStorage.setItem('menu',0)
      this.$router.push({path:'/home',query:{classifyid:0,sta:1}})
    },
    changetitle(e,item){
      sessionStorage.setItem('menu',e)
      this.isActive = e
      // console.log(item)
      if(item.status == 0){
        this.$router.push({path:item.path,query:{classifyid:e,sta:1}})   
      }else if(item.status == 1){
        this.$router.push({path:'/home',query:{classifyid:e+2,checkid:item.id,sta:1}})
      }else if(item.status == 2){
        this.$router.push({
          path:'/footdetail',
          query:{
            id:'1',
            t: Date.now()
          }
        })
      }
    },
    changeActive(e,item){
      // sessionStorage.setItem('menu',e)
      this.isHover = e
    },
    removeActive(e,item){
      this.isActiveOne=-1
       this.isHover = -1
    },
    gotoclassify(items,item){
      console.log(this.isHover)
      this.isActive = this.isHover
      sessionStorage.setItem('menu',this.isHover)
      if(items.status == 'new'){
        this.$router.push({path:'/classify',query:{t: Date.now(),classifyid:items.id,isnew:1}})
      }else if(items.status == 'foot'){
        if(items.id == 3){
          this.$router.push({
            path:'/footlian',
            query:{
              id:items.id,
              t: Date.now()
            }
          })
        }else{
          this.$router.push({
            path:'/footdetail',
            query:{
              id:items.id,
              t: Date.now()
            }
          })
        }
        
      }else{
        console.log(this.isActive)
        if(items.children && items.children.length > 0){
          // this.$router.push({path:'/home',query:{classifyid:this.isActive+2,checkid:items.id,sta:1,bannerid:item.id}})
          // this.$router.push({path:''})
      //  this.$router.push({path:'/classify',query:{t: Date.now(),classifyid:items.id}})
       }else{
          this.$router.push({path:'/classify',query:{t: Date.now(),classifyid:items.id}})
        }
        
      }
      
    },
    gotocar(){
      this.$router.push({path:'/car'})
      sessionStorage.setItem('menu','other')
      this.isActive = -1
    },
    gotomine(){
      checkUser(getToken()).then( res=>{
          if(res.errno == 0){
              this.$router.push({path:'/mine'})
              sessionStorage.setItem('menu','other')
              this.isActive = -1
          }else{
             this.$router.push({
                path:'/login'
             })
          }
       })
      
    },
    logoutUser(){
      // this.confirm
      logout({userId:getToken()}).then(response => {
        
      })  
      removeToken()
      sessionStorage.removeItem("name")
      this.showName=null
      // removeOnly()    
      this.$router.replace({path:'/login'})
      // window.location.reload()
    },
    gotoSearch(){
      if(this.$route.path == '/search'){
        this.searchInput = ''
        this.$router.push({path:'/home',query:{sta:1}})
      }else{
        this.$router.push({path:'/search'})
      }
    },
    searchContent(){
      this.$router.push({path:'/search',query:{searchtext:this.searchInput}})
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.welcome{color:#fff; font-size: 16px;}
.wrap{
  width: 100%;
  box-sizing: border-box;
  /* margin-bottom: 10px; */
}
.side{
  width: 100%;
  height: 80px;
  background: #DADADA;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #1B1B15;
  line-height: 80px;
  margin: 0px;
}
.header{
  width: 100%;
  display: flex;
  background: #BE795A;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

}
.logo img{
  width: 220px;
  cursor: pointer;
}
.other{
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.other img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
  cursor: pointer;
} 
.minebox{
  position: relative;
}
.minebox:hover.minebox>div{
  display: block;
}
.minebox>div{
  position: absolute;
  line-height: 30px;
  font-size: 18px;
  cursor: pointer;
  background: rgb(222, 222, 222);
  padding: 3px 10px;
  white-space: nowrap;
  display: none;
}
.searchBox{
  width: 70%;
  display: flex;
  align-items: center;
  padding: 0px 5%;
  box-sizing: border-box;
  justify-content: center;
}
.searchBox>>>.el-input{
  width: 890px;
}
.searchBox>>>.el-input__inner{
  width: 890px;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #DCB29F;
  border-radius: 25px;
  padding-left:50px;
}
.searchBox>>>.el-input__icon{
  width: 40px;
  height: 50px;
  line-height:50px;
}
.searchBox>>>.el-input__prefix{
  color: #DCB29F;
  font-size: 20px;
}
.menu{
  width: 70%;
  display: flex;
  align-items: center;
  padding: 0px 5%;
  box-sizing: border-box;

}
.menuItem{
  width: 180px;
  text-align: center;
  /* margin-right: 48px; */
  position: relative;
}
.menuItem_title{
  font-size: 23px;
  color: #fff;
  cursor: pointer;

  height: 100px;
  line-height: 100px;
}
.menuItem_title img{
  margin-left:8px;width:15px
}
.menuItem_selectTitle{
  font-size: 23px;
  color: #fff;
  cursor: pointer;
  height: 100px;
  line-height: 100px;
}
.menuItem_selectTitle img{
  margin-left:8px;width:15px
}
.menuItem_content{
  width: 180px;
  /* border-bottom-left-radius: 20px; */
  /* border-bottom-right-radius: 20px; */
  position: absolute;
  top: 100px;
  left: 0px;

  box-sizing: border-box;
  color: #fff;
  z-index: 9999!important;
}
.content_item{
  padding:7px 0;
  padding-left: 15px;
    background:#da9778;
  /* opacity: 0.5; */
  /* background: rgb(155, 155, 155); */
  color: #fff;

  text-align: left;
  cursor: pointer;
}
.content_item:hover{
   opacity: 1;
  background: #BE795A;
}
.title_one{
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  line-height: 34px;
}
.title_one img{
  width:15px
}
.content_two{
  position: absolute;
  top:-7px;
  width: 100%;
  left: 165px;
}
.content_item_two{
  

  
  padding-left: 15px;
  background:#da9778;
  /* opacity: 0.5; */
  
  text-align: left;
}
.content_item_two:hover{
opacity: 1;
  background:#BE795A;
  
}
.title_two{
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 48px;
}
</style>
